<!-- src/views/dashboard/NodeDashboard.vue -->
<template>
  <div class="dashboard-container">
    <!-- 主图表容器 -->
    <div
      ref="chartContainer"
      class="glow-chart-container"
      :style="{ height: chartHeight }"
    ></div>

    <!-- 全绿状态提交按钮 -->
    <transition name="el-zoom-in-center">
      <el-button
        v-if="allGreen"
        type="success"
        class="submit-btn"
        @click="handleSubmit"
      >
        提交配置
      </el-button>
    </transition>
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "@/mixins/resize";

export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      nodes: Array(6)
        .fill()
        .map((_, i) => ({
          name: `节点${i + 1}`,
          value: Math.random() > 0.5 ? 0 : 1,
          x: (i % 3) * 300 + 150, // 非对称X坐标计算
          y: Math.floor(i / 3) * 250 + 150, // 错落Y坐标
        })),
      chartHeight: "600px",
    };
  },
  computed: {
    allGreen() {
      return this.nodes.every((n) => n.value !== 0);
    },
  },
  mounted() {
    this.initChart();
    this.setupAutoRefresh();
  },
  methods: {
    // 初始化图表[1,2](@ref)
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer, "macarons");
      this.updateChart();
    },

    // 动态更新图表配置[3,7](@ref)
    updateChart() {
      const option = {
        animationDuration: 1000,
        series: [
          {
            type: "graph",
            layout: "none", // 手动控制布局
            roam: true,
            focusNodeAdjacency: true,
            symbolSize: 60,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [6, 12],
            label: {
              show: true,
              fontSize: 14,
              color: "#333",
            },
            data: this.nodes.map((node) => ({
              ...node,
              itemStyle: this.getNodeStyle(node.value),
              emphasis: {
                itemStyle: {
                  shadowBlur: 30,
                  shadowColor: node.value
                    ? "rgba(0,255,0,0.8)"
                    : "rgba(255,0,0,0.8)",
                },
              },
            })),
          },
        ],
      };
      this.chart.setOption(option);
    },

    // 节点样式生成器[3,6](@ref)
    getNodeStyle(value) {
      return {
        color: value ? "#52c41a" : "#ff4d4d",
        shadowBlur: value ? 25 : 30,
        shadowColor: value ? "rgba(0,255,0,0.6)" : "rgba(255,0,0,0.8)",
        borderWidth: 3,
        borderColor: "#ffffff",
        opacity: 0.9,
      };
    },

    // 自动刷新模拟[5,8](@ref)
    setupAutoRefresh() {
      setInterval(() => {
        this.nodes = this.nodes.map((node) => ({
          ...node,
          value: Math.random() > 0.7 ? node.value : Number(!node.value),
        }));
        this.updateChart();
      }, 3000);
    },

    // 提交处理
    handleSubmit() {
      this.$modal.msgSuccess("配置已提交");
      // 实际业务中调用API提交数据
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;

  .glow-chart-container {
    background: radial-gradient(circle at center, #f0f2f5 0%, #e6e8eb 100%);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  .submit-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
    padding: 12px 24px;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
  }
}
</style>
